<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阿文vue学习</title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	<style>
		.text-danger {
			width: 100px;
			height: 100px;
			background: red;
		}
	.active {
	    width: 100px;
	    height: 100px;
	    background: green;
	}
	</style>
	</head>
	<body>
	<div id="app">
	  <div class="static"
	       <!-- v-bind:class="{ 'active': isActive, 'text-danger': hasError }"> -->
		   <!-- 可以直接绑定数据里的一个对象 -->
		   <!-- <div v-bind:class="classObject"></div> -->
		   <!-- 把一个数组传给 v-bind:class  -->
		   <!-- <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div> -->
		   <!-- 内联样式 使用数组将多个样式对象应用到一个元素上-->
		   <div v-bind:style="[baseStyles, overridingStyles]">百度</div>
	    </div>
	</div>
	​
	<script>
	new Vue({
	  el: '#app',
	  data: {
	     // isActive: true,
	     // hasError: false
		 <!-- 可以直接绑定数据里的一个对象 -->
		 // classObject: {
		 //       active: true,
		 //       'text-danger': false
		 //     }
		 // 把一个数组传给 v-bind:class 
		 // isActive: true,
		 // activeClass: 'active',
		 // errorClass: 'text-danger'
		 // 内联样式 使用数组将多个样式对象应用到一个元素上
		  baseStyles: {
		       color: 'green',
		       fontSize: '30px'
		     },
		 	overridingStyles: {
		       'font-weight': 'bold'
		     }
	  }
	})
	</script>
	</body>
</html>
